<template>
	<view class="hospital-layout">
		<view class="left">
			<image :src="itemInfo.avatar_url" mode="aspectFill"></image>
		</view>
		<view class="right">
			<view class="name">
				{{ itemInfo.name }}
			</view>
			<view class="type">
				{{ itemInfo.rank }} {{ itemInfo.label }}
			</view>
			<view class="description">
				{{ itemInfo.intro }}
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		itemInfo: Object
	})
</script>

<style lang="scss" scoped>
	.hospital-layout {
		margin: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		height: 200rpx;

		.left {
			width: 180rpx;
			height: 180rpx;
			object-fit: fill;

			image {
				width: 100%;
				height: 100%;
				border-radius: 30rpx;
			}
		}

		.right {
			width: 100%;
			height: 100%;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			text-align: left;
			flex: 1;

			.name {
				font-size: 35rpx;
				font-weight: bold;
				width: 100%;
			}

			.type {
				color: green;
				width: 100%;
				font-size: 30rpx;
				font-weight: bold;
			}

			.description {
				overflow: hidden;
				text-overflow: ellipsis;
				// 只要超过宽度就换行，不论中文还是英文
				word-break: break-all;
				//最多展示两行
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				color: #666;
			}
		}
	}
</style>